<template>
  <edu-dialog
    :title.sync="dialog.title"
    :visible.sync="dialog.showDialog"
    @close="close"
    @confirm="confirm"
    confirmBtnText="确定"
    width="500px"
  >
    <div class="fileImportBox">
      <div style="margin-bottom: 40px">
        <el-button @click="downloadTpl" size="small">下载模版</el-button>
      </div>
      <div>
        <Upload
          v-model="image"
          ref="uploadComp"
          accept=".xlsx,.xls"
          listType="text"
          :action="action"
          @uploadDone="uploadDone"
        >
          <div class="el-upload__tip" slot="tip">
            只允许导入xls、xlsx格式文件，且文件大小不超过10M。
          </div>
        </Upload>
      </div>
    </div>
  </edu-dialog>
</template>

<script>
import { downloadExcelTemplate } from "@/api/common";
import utils from "@/utils";

export default {
  props: {
    action: {
      type: String,
    },
    downloadTplUrl: {
      type: String,
      default: () => {
        return "com.iss.edu.service.business.vo.as.ImportAccountVo";
      },
    },
  },
  data() {
    return {
      image: "",
      dialog: {
        title: "导入文件",
        showDialog: false,
      },
    };
  },
  methods: {
    open(data) {
      this.dialog.showDialog = true;
      this.image = "";

      this.$nextTick(() => {
        this.$refs.uploadComp.init();
      });
    },
    close() {
      this.dialog.showDialog = false;
    },
    // 下载模版
    downloadTpl() {
      downloadExcelTemplate(this.downloadTplUrl).then((res) => {
        utils.downloadFile(res);
      });
    },
    uploadDone(data) {
      if(data){
        this.$emit("uploadDone",data);
      }
    },
    async confirm() {
      this.close();

      this.$emit("done");
    },
  },
};
</script>

<style lang="scss" scoped>
.fileImportBox {
  display: flex;
  // align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 300px;
}
</style>
